import React from 'react';
import { connect } from 'umi';
import { Table } from 'antd';
import { useState, useEffect } from 'react';
import styles from './index.less';
import { tableLocale } from '@/tool/components/PageEmpty';
import { LOCKED_TYPE, TRADE_STRATEGY } from '../../../../constant/enums';

const { Column } = Table;

const TablePendingOrder = ({ unitResultList }) => {
  const [loading, setLoading] = useState(false),
    [dataSource, setDataSource] = useState([]),
    [columnData, setColumnData] = useState([]);

  useEffect(() => {
    setLoading(true);
    try {
      let dataSource = Array.from({ length: 24 }, (_, index) => ({})),
        columnData = [];
      unitResultList.forEach(({ unitId, unitTitle, unitHourResultList }) => {
        columnData.push({ unitId, unitTitle });
        unitHourResultList.forEach(
          ({ hourOrder, power, price, lockedTradeType, tradeStrategyType }) => {
            dataSource[hourOrder - 1][`${unitId}_power`] = power?.toFixed(3);
            dataSource[hourOrder - 1][`${unitId}_price`] = price?.toFixed(2);
            dataSource[hourOrder - 1][`${unitId}_lockedType`] = lockedTradeType;
            dataSource[hourOrder - 1][`${unitId}_tradeType`] = tradeStrategyType;
            if (!dataSource[hourOrder - 1].hourOrder) {
              dataSource[hourOrder - 1].hourOrder = hourOrder;
            }
          },
        );
      });
      setColumnData(columnData);
      setDataSource(dataSource);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  }, [unitResultList]);

  const tableContentRender = (record, unitId) => {
    let colorClass = '',
      spanClass = '',
      {
        [`${unitId}_tradeType`]: tradeType,
        [`${unitId}_lockedType`]: lockedType,
        [`${unitId}_power`]: power,
        [`${unitId}_price`]: price,
      } = record;
    switch (tradeType) {
      case TRADE_STRATEGY.SELL:
        colorClass = 'red';
        break;
      case TRADE_STRATEGY.BUY:
        colorClass = 'green';
        break;
      default:
        break;
    }
    switch (lockedType) {
      case LOCKED_TYPE.SELL:
        spanClass = 'red';
        break;
      case LOCKED_TYPE.BUY:
        spanClass = 'green';
        break;
      default:
        break;
    }
    if (power && price) {
      return (
        <span className={`${styles[`${spanClass}Background`]} ${styles.contentSpan}`}>
          <span className={styles[colorClass]}>{power}</span>、<span>{price}</span>
        </span>
      );
    }
    return (
      <span className={`${styles[`${spanClass}Background`]} ${styles.contentSpan}`}>
        <span>-</span>
      </span>
    );
  };

  return (
    <Table
      loading={loading}
      className={styles.table}
      dataSource={dataSource}
      rowKey="hourOrder"
      bordered={true}
      pagination={false}
      locale={tableLocale}
      scroll={{ x: true }}
    >
      <Column
        title="时点"
        align="center"
        dataIndex="hourOrder"
        key="hourOrder"
        width={76}
        fixed="left"
      />
      {columnData?.map(({ unitTitle, unitId }) => (
        <Column
          title={unitTitle}
          className={styles.stationsColumn}
          dataIndex={unitId}
          key={unitId}
          align="center"
          render={(text, record) => tableContentRender(record, unitId)}
        />
      ))}
    </Table>
  );
};

export default connect(({ rollingBatch: { unitResultList } }) => ({ unitResultList }), null, null, {
  forwardRef: true,
})(TablePendingOrder);
